<template>
  <div class="container">

    <IsLoading v-if="isLoading"></IsLoading>

    <div class="scalable-container" :style="{ transform: `scale(${scale})`, transformOrigin: 'top' }">
      <!-- 页面内容 -->
      <div class="content">
        <el-row>
          <!--    左边区域-->
          <el-col :span="3" class="left">
            <el-button v-for="(item, index) in information" :key="index" type="text" class="left-scroll-view-item"
                       :class="{'is-active': activeIndex === index}" @click="setActive(index)"
                       style="flex: 1; width: 100%; box-sizing: border-box;height: 50px; position: relative;margin: 10px 0">
              <img :src="IMAGE_URL + item.fieldImg" style="width: 18px;height: 18px;margin-right: 3px;">
              {{ item.fieldName }}
              <div v-if="activeIndex === index" class="active-indicator"></div>
            </el-button>
          </el-col>


          <!--      右边区域-->
          <el-col :span="21">

            <el-breadcrumb separator-class="el-icon-arrow-right" style="flex:1;margin: 18px 15px">
              <el-breadcrumb-item :to="{ path: '/front/homeFront' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentCategoryName ? currentCategoryName : '关于我们' }}</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="right-item">
              <div class="fieldName">{{ informate.fieldName }}</div>

              <el-divider></el-divider>

              <div v-html="informate.configContent" class="html"></div>
            </div>

          </el-col>

        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
import config from "../../../config";

export default {
  name: "Contact",

  data() {
    return {
      IMAGE_URL: config.BASE_URL,
      form: {
        activeIndex: this.$route.query.activeIndex,
      },
      activeIndex: 0,
      information: [],
      informate: {},
      currentCategoryName: '',
      scale: 1,  // 初始缩放比例为 1，即原始大小
      isLoading: true
    }
  },
  // created() {
  //   this.loadAbout()
  //   this.judge()
  // },
  created() {
    this.judge()
    // 使用 Promise.all 等待多个异步操作完成
    Promise.all([
      this.loadAbout(),
    ]).then(() => {
      this.isLoading = false;
    }).catch((error) => {
      console.error('Error loading data:', error);
      this.isLoading = false;
    });
  },
  mounted() {
    // 监听滚轮事件
    window.addEventListener('wheel', this.handleWheelEvent);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('wheel', this.handleWheelEvent);
  },
  beforeRouteEnter(to, from, next) {
    // 判断是否从特定页面跳转过来
    if (from.name === 'Search') {
      next(vm => {
        // 在组件实例创建后刷新页面
        window.location.reload();
      });
    } else {
      next();
    }
  },
  methods: {
    loadAbout() {
      return this.$request.get('/apis/config/list').then(res => {
        this.information = res.data
        this.informate = this.information[0]
      })
    },
    // 设置当前激活的按钮索引
    // setActive(index) {
    //   this.isLoading = true;  // 显示加载效果
    //   setTimeout(() => {
    //     this.activeIndex = index;
    //     this.informate = this.information[index];
    //     this.currentCategoryName = this.information[index].fieldName;
    //     window.scrollTo(0, 0);
    //     this.isLoading = false;
    //   }, 200);  // 延迟 200 毫秒后再更新状态
    // },
    setActive(index) {
      this.activeIndex = index;
      this.informate = this.information[index];
      this.currentCategoryName = this.information[index].fieldName;
      window.scrollTo(0, 0);
    },
    judge() {
      if (!this.information || Object.keys(this.information).length === 0) {
        // 延迟再试
        setTimeout(this.judge, 100);  // 100毫秒后重试
        return;
      }
      if (this.form.activeIndex) {
        this.activeIndex = this.form.activeIndex
        this.informate = this.information[this.activeIndex]
      }
    },
    handleWheelEvent(event) {
      // 检查是否按下了Ctrl键
      if (event.ctrlKey) {
        // 防止页面的默认缩放行为
        //event.preventDefault();

        // 判断滚轮方向
        if (event.deltaY < 0) {
          // 滚轮向上滚动，放大页面
          this.scale = Math.min(this.scale + 0.1, 2);  // 最大放大到2倍
        } else {
          // 滚轮向下滚动，缩小页面
          this.scale = Math.max(this.scale - 0.1, 0.5);  // 最小缩小到0.5倍
        }
      }
    },
  },
}
</script>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

.left-scroll-view-item {
  color: black; /* 默认颜色 */
  margin: 1px 0;
  text-align: center;
  font-size: 14px;
  border: none;
}

.left-scroll-view-item.is-active {
  background-color: #d4dff4;
  color: blue; /* 激活时的颜色 */
  font-size: 15px;
  border: none;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px; /* Width of the indicator */
  background-color: blue; /* Color of the indicator */
}

.left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 10px;
  background: white;
  position: sticky;
  top: 5.5em;
  padding: 18px 0;
}

.fieldName {
  font-size: 17px;
  font-weight: bold;
  padding-top: 18px;
  padding-left: 20px;
}

.html {
  font-size: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 36px;
}

.right-item {
  background: white;
  margin-left: 15px;
  margin-bottom: 30px;
}
</style>